<template>
  <view class="panel">
    <view class="barnum">{{ cardNo }}</view>
    <canvas class="barcode" canvas-id="barcode" @longtap="save" />
    <canvas class="qrcode" canvas-id="qrcode" @longtap="save" />
  </view>
</template>

<script>
// 二维码
const qrModule = require('@/utils/qrcode')
// 条形码
import { code128 } from '@/utils/barcode'
export default {
  components: {},
  data() {
    return {
      cardNo: '......'
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },
  onLoad() {
    // 如果没有mall信息->去登陆页面
    if (!this.hasLoginAndHasMallInfo) {
      return uni.$u.route('/pages/users/login/index')
    }
    const cardNo = this.userInfo.cardNo
    this.cardNo = cardNo
    this.barcode('barcode', cardNo, 680, 200)
    this.qrcode('qrcode', cardNo, 420, 420)
  },
  methods: {
    /**
     * 条形码
     * @param {*} id
     * @param {*} code
     * @param {*} width
     * @param {*} height
     */
    barcode(id, code, width, height) {
      code128(uni.createCanvasContext(id), code, this.convertLength(width), this.convertLength(height))
    },
    /**
     * 二维码
     * @param {*} id
     * @param {*} code
     * @param {*} width
     * @param {*} height
     */
    qrcode(id, code, width, height) {
      qrModule.api.draw(code, {
        ctx: uni.createCanvasContext(id),
        width: this.convertLength(width),
        height: this.convertLength(height)
      })
    },
    convertLength(length) {
      return Math.round(uni.getSystemInfoSync().windowWidth * length / 750)
    }
  }
}
</script>

<style lang="scss" scoped>
.panel {
  height: calc(100vh);
  padding-top: 20%;
  @include flex-left(column);
  .barnum {
    width: 670rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 38rpx;
    font-weight: bold;
    text-align: center;
    letter-spacing: 10rpx;
    white-space: nowrap;
  }
  .barcode {
    height: 200rpx;
    width: 680rpx;
  }
  .qrcode {
    height: 420rpx;
    width: 420rpx;
  }
}
</style>
